import styled from 'styled-components'
export const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* 用主题彩色边框和文本*/
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;
// 我们正在向未在ThemeProvider中包装的按钮传递默认主题
Button.defaultProps = {
    theme: {
      main: "palevioletred"
    }
  }
  // react的组件可以用context语法实现多组件共享状态，但是在样式组件里无法直接使用context.consumer语法或者useContext去共享状态
  // 可以通过themeProvider给样式组件共享状态，被themeProvider标签包裹的样式组件都可以通过props.theme访问到themeProvider的theme属性值，来共享状态